<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList">
		  <el-form-item>
		    <el-input  v-model="dataForm.key" placeholder="赛事名称" clearable></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button>查询</el-button>
		    <el-button type="primary" @click="add()">新增</el-button>
		    <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
		  </el-form-item>
		</el-form>
		<el-table
		  :data="dataList"
		  border
		  v-loading="dataListLoading"
		  @selection-change="selectionChangeHandle"
		  style="width: 100%;">
		  <el-table-column
		    type="selection"
		    header-align="center"
		    align="center"
		    width="50">
		  </el-table-column>
		  <el-table-column
		    prop="id"
		    header-align="center"
		    align="center"
		    label="主键">
		  </el-table-column>
		  <el-table-column
		    prop="order_number"
		    header-align="center"
		    align="center"
		    label="预约单号">
		  </el-table-column>
		  <el-table-column
		    prop="competition_id"
		    header-align="center"
		    align="center"
		    label="赛事名称">
		  </el-table-column>
		  <el-table-column
		    prop="uid"
		    header-align="center"
		    align="center"
		    label="预约用户">
		  </el-table-column>
		  <el-table-column
		    prop="price"
		    header-align="center"
		    align="center"
		    label="赛事价格">
		  </el-table-column>
		  <el-table-column
		    prop="order_types"
		    header-align="center"
		    align="center"
		    label="赛事类型">
		  </el-table-column>
		  <el-table-column
		    prop="payment_types"
		    header-align="center"
		    align="center"
		    label="付款类型">
		  </el-table-column>
		  <el-table-column
		    prop="seat_number"
		    header-align="center"
		    align="center"
		    label="购买座位">
		  </el-table-column>
		  <el-table-column
		    prop="order_time"
		    header-align="center"
		    align="center"
		    label="预约日期">
		  </el-table-column>
		  <el-table-column
		    fixed="right"
		    header-align="center"
		    align="center"
		    width="150"
		    label="操作">
		    <template slot-scope="scope">
		      <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
		      <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<el-pagination
		  @size-change="sizeChangeHandle"
		  @current-change="currentChangeHandle"
		  :current-page="pageIndex"
		  :page-sizes="[10, 20, 50, 100]"
		  :page-size="pageSize"
		  :total="totalPage"
		  layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<!-- 新增 -->
		<el-dialog
		  :title="title"
		  :visible.sync="addOrUpdateVisible"
		  width="50%">
		  <el-form :model="addForm" ref="addForm" :rules="dataRule" label-width="80px">
			  <el-form-item label="预约单号" prop="order_number">
			    <el-input v-model="addForm.order_number" placeholder="预约单号"></el-input>
			  </el-form-item>
			  <el-form-item label="赛事名称" prop="competition_id">
			    <el-input v-model="addForm.competition_id" placeholder="赛事名称"></el-input>
			  </el-form-item>
			  <el-form-item label="用户名称" prop="uid">
			    <el-input v-model="addForm.uid" placeholder="用户名称"></el-input>
			  </el-form-item>
			  <el-form-item label="赛事价格" prop="price">
			    <el-input v-model.number="addForm.price" placeholder="赛事价格"></el-input>
			  </el-form-item>
			  <el-form-item label="赛事类型" prop="order_types">
			    <el-input v-model="addForm.order_types" placeholder="赛事类型"></el-input>
			  </el-form-item>
			  <el-form-item label="付款类型" prop="payment_types">
			    <el-input v-model="addForm.payment_types" placeholder="付款类型"></el-input>
			  </el-form-item>
			  <el-form-item label="购买座位" prop="seat_number">
			    <el-input v-model.number="addForm.seat_number" placeholder="购买座位"></el-input>
			  </el-form-item>
			  <el-form-item label="预约日期" prop="order_time">
			    <el-date-picker
			        v-model="addForm.order_time"
			        type="date"
			        format="yyyy-MM-dd"
			        value-format="yyyy-MM-dd"
			        placeholder="预约日期">
			    </el-date-picker>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addOrUpdateVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
		  </span>
		  
		</el-dialog>
	</div>	
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				dataForm:{
					key:''
				},
				addForm:{
					id:0,
					order_number:'',
					competition_id:0,
					uid:0,
					price:0,
					order_types:'',
					payment_types:'',
					seat_number:0,
					order_time:''
				},
				dataListSelections: [],
				title:'',
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataList: [],
				dataListLoading: false,
				addOrUpdateVisible:false,
				dataRule:{
					competition_id: [
					  { required: true, message: '赛事名称不能为空', trigger: 'blur' }
					],
					uid: [
					  { required: true, message: '预约用户不能为空', trigger: 'blur' }
					],
					price: [
					  { required: true, message: '赛事价格不能为空', trigger: 'blur' },
					  { type: 'number', message: '赛事价格必须为数字值'}
					],
					order_types: [
					  { required: true, message: '赛事类型不能为空', trigger: 'blur' }
					],
					seat_number:[
					  { required: true, message: '座位不能为空', trigger: 'blur' },
					  { type: 'number', message: '座位必须为数字值'}
					],
					payment_types: [
					  { required: true, message: '付款类型不能为空', trigger: 'blur' }
					],
					order_time: [
					  { required: true, message: '预约日期不能为空', trigger: 'blur' }
					]
				}
			}
		},	
		created () {
		  this.getDataList()
		},
		methods:{
			getDataList(){
				axios({
					url:'/api/competitionOrder/page',
					methods:'get',
					params:{
						'currPage':this.pageIndex,
						'pageSize':this.pageSize,
						'key':this.dataForm.key
					}
				}).then(res=>{
					console.log(res.data)
					if(res.data.code === 0){
						this.dataList = res.data.page.list
						this.totalPage = res.data.page.totalPage
					}else {
						this.dataList = []
						this.totalPage = 0
					}
					this.dataListLoading = false
				}).catch(e=>{
					console.log(e)
				})
			},
			// 每页数
			sizeChangeHandle (val) {
			  this.pageSize = val
			  this.pageIndex = 1
			},
			// 当前页
			currentChangeHandle (val) {
			  this.pageIndex = val
			},
			//多选
			selectionChangeHandle(val){
				this.dataListSelections = val
			},
			//新增
			add(){
				this.title = '新增预约'
				this.addOrUpdateVisible = true
			},
			//修改
			update(id){
				this.title = '修改预约'
				this.addOrUpdateVisible = true
				this.addForm.id = id
				//查询信息
				axios({
					url:'/api/competitionOrder/info/'+id,
					method:'get'
				}).then(res=>{
					console.log(res.data.ground)
					if(res.data.code === 0){
						const competitionOrder = res.data.competitionOrder
						this.addForm.order_number = competitionOrder.order_number
						this.addForm.competition_id = competitionOrder.competition_id
						this.addForm.uid = competitionOrder.uid
						this.addForm.price = competitionOrder.price
						this.addForm.order_types = competitionOrder.order_types
						this.addForm.payment_types = competitionOrder.payment_types
						this.addForm.seat_number = competitionOrder.seat_number
						this.addForm.order_time = competitionOrder.order_time
					}
				})
			},
			//新增提交信息
			dataFormSubmit(){
				if(this.title === '新增预约'){
					axios({
						url:'/api/competitionOrder/addCompetitionOrder',
						method:'post',
						data:{
							'order_number':this.addForm.order_number,
							'competition_id':this.addForm.competition_id,
							'uid':this.addForm.uid,
							'price':this.addForm.price,
							'order_types':this.addForm.order_types,
							'payment_types':this.addForm.payment_types,
							'seat_number':this.addForm.seat_number,
							'order_time':this.addForm.order_time
						}
					}).then(res=>{
						console.log(res)
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.addOrUpdateVisible = false
							    this.getDataList()
							  }
							})
						}
					}).catch(e=>{
						console.log(e)
					})
				}else if(this.title === '修改预约'){
					axios({
						url:'/api/competitionOrder/updateCompetitionOrder',
						method:'post',
						data:{
							'id':this.addForm.id,
							'order_number':this.addForm.order_number,
							'competition_id':this.addForm.competition_id,
							'uid':this.addForm.uid,
							'price':this.addForm.price,
							'order_types':this.addForm.order_types,
							'payment_types':this.addForm.payment_types,
							'seat_number':this.addForm.seat_number,
							'order_time':this.addForm.order_time
						}
					}).then(res=>{
						console.log(res)
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.addOrUpdateVisible = false
							    this.getDataList()
							  }
							})
						}
					}).catch(e=>{
						console.log(e)
					})
				}
			},
			//删除
			deleteHandle(id){
				var ids = id ? [id] : this.dataListSelections.map(item => {
				  return item.id
				})
				this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(()=>{
					axios({
						url:'/api/competitionOrder/delete',
						method:'post',
						data:ids
					}).then(res=>{
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.getDataList()
							  }
							})
						}else{
							this.$message.error(data.msg)
						}
					})
				})
			}
		}
	}
</script>
